<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/font/iconfont.css">
    <style>
        .star-box{
            display: inline-block;
        }
        .iconfont{
            cursor: pointer;
        }
        .icon-collection-b{
            color: goldenrod;
            padding-right: 4px;
        }
        .icon-collection{
            color: #999;
            padding-right: 4px;
        }
    </style>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li>
                {{ obj.name }}：
                <!-- vue指令在构建:关键字时，只识别第一个: , 后续的冒号均为参数内容的一部分 -->
                <itany-star :source=" obj.s " v-on:update:source=" updateSource "></itany-star>
            </li>
        </ul>
        <hr>
        <ul>
            <li v-for="(item, index) in sources" :key="index">
                {{ item.name }}：
                <!-- @ 简写 v-on: -->
                <!-- 
                    当子组件绑定的自定义事件，需要页面中的相关参数的同时又需要子组件回传的数据，可以定义()，
                    以关键字$event,表示子组件回传的数据替代变量名 
                -->
                <itany-star :source=" item.s " @update:source=" updateSource2($event,index) "></itany-star>
            </li>
        </ul>
    </div>

    <script type="text/x-template" id="star">
        <div v-if=" isReadonly "  class="star-box">
            <span class="iconfont" 
                v-for=" item in 5 " 
                :class=" source>=item?'icon-collection-b':'icon-collection' "
            ></span>
            <span>{{ source }}</span>
        </div>
        <div v-else class="star-box" @mouseout=" setSouce( temp ) ">
            <span class="iconfont" 
                v-for=" item in 5 " 
                :class=" source>=item?'icon-collection-b':'icon-collection' "
                @mouseover=" setSouce(item) "
                @click=" setCheckSource(item) "
            ></span>
            <span>{{ source }}</span>
        </div>
    </script>

    <script>
        Vue.component("itany-star", Vue.extend({
            template:"#star",
            data(){
                return {
                    // source:0,
                    temp:0
                }
            },
            props:{
                source:{
                    type:Number,
                    default:0
                },
                isReadonly:{
                    type:Boolean,
                    default:false
                }
            },
            methods: {
                setSouce(nv){
                    // this.source = nv;
                    this.$emit("update:source",nv)
                },
                setCheckSource(nv){
                    this.temp = nv;
                }
            },
            created() {
                this.temp = this.source;
                console.log( this.$listeners );
            },
        }) )

        new Vue({
            el:"#app",
            data:{
                obj:{ name:"服务评价",s:3 },
                sources:[
                    { name:"服务评价",s:3 },
                    { name:"物流评价",s:2 },
                    { name:"商品评价",s:4 }
                ]
            },
            methods:{
                updateSource(nv){
                    this.obj.s = nv;
                },
                updateSource2(nv,i){
                    console.log("通过$event 替代的子组件回传数据",nv);
                    console.log("页面循环时的数组下标",i)
                    this.sources[i].s = nv;
                }
            }
        })
    </script>
</body>
</html>